
<style lang='less'>
</style>
<template>
  <div>
    <el-card>
       <div class="flex jc-sb aic ml-10">
          <p class="f16">
          <span class="bs">自定义类型/</span>
          <span class="jia">测试类型</span>
          <span class="f14">- 展示所有自定义的测量类型，提供了添加测量类型、修改测量类型、删除测量类型等功能。</span>
        </p>
          <el-button type="text" class="f16" @click="increase()">新增</el-button>
       </div>
    </el-card>
    <el-card class="mt-10">
      <div>
        
    <el-dialog v-model="centerDialogVisible" title="新增测量" width="30%" center>
          <div style="margin: 20px" />
            <el-form
              ref="ruleFormRef"
              :label-position="right"
              label-width="100px"
              :model="fromObj"
              style="max-width: 460px"
            >
              <el-form-item label="名称">
                <el-input v-model="fromObj.name" />
              </el-form-item>
              <el-form-item label="单位">
                <el-input v-model="fromObj.unit" />
              </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)"
                  >确定</el-button
                >
                <el-button @click="centerDialogVisible = false">取消</el-button>
              </el-form-item>
            </el-form>
    </el-dialog>
      </div>
   <el-table :data="tableData" stripe border style="width: 100%">
    <el-table-column align="center" type="index" label="序号" width="80" />
    <el-table-column align="center" prop="id" label="测量id" />
    <el-table-column align="center" prop="name" label="测量名称"  />
    <el-table-column align="center" prop="unit" label="测量单位" />
    <el-table-column align="center" prop="cTime" label="创建时间" :formatter="utils.fcTime" />
    <el-table-column align="center" prop="uTime" label="更新时间"  />
    <el-table-column label="Operations">
      <template #default="scope">
        <el-button size="large" type="primary" :icon="Edit" circle  @click="handleEdit(scope.$index, scope.row)"></el-button>
        <el-button
          size="large"
          type="danger"
          :icon="Delete"
          circle 
          @click="handleDelete(scope.$index, scope.row)"
          ></el-button
        >
      </template>
    </el-table-column>
  </el-table>
  </el-card>
  </div>
</template>
<script setup>
import { onMounted, ref,inject,reactive } from "vue";
import { ElMessage ,ElMessageBox } from 'element-plus';
import * as api from "@/api/index";
import {Delete,Edit,} from '@element-plus/icons-vue';
//根组件提供utils对象
const utils = inject('utils');
const tableData = ref([
   {
"id": "120000200104191344",
"cTime": 1666770126007,
"uTime": 1666770126007,
"name": "惺惺惜惺惺",
"unit": "1111"
},
])
const id = ref('');
//请求测试列表
const getTableData = ()=>{
  api.$measureList().then(res=>{
    console.log(res);
    tableData.value = res.data;
  })
}
onMounted(getTableData);
//弹窗
const centerDialogVisible = ref(false)
const editing = ref(false)
//表单
const fromObj = reactive({
  name: '',
  unit: '',
  index:'',
})
//新增事件
const increase = ()=>{
  centerDialogVisible.value =true;
  fromObj.name = '';
  fromObj.unit = '';
  editing.value = false;
}
//新增确定
const submitForm = ()=>{
let data = {
  name:fromObj.name,
  unit:fromObj.unit,
  id:id.value
};
console.log(data)
if(!data.name ||!data.unit){
   ElMessage({
    message: '值不能为空',
    type: 'warning',
  })
}else{
  if(editing.value){
    api.$measureEdit(data).then(res=>{
      centerDialogVisible.value = false
      let index = fromObj.index;
      tableData.value[index].name = fromObj.name;
      tableData.value[index].unit = fromObj.unit;
       ElMessage({
        message: '修改成功',
        type: 'success',
         });
    })
  }else{
    api.$measureAdd(data).then(res=>{
  // console.log(res);
  tableData.value.unshift(res.data);
  ElMessage({
    message: '添加成功',
    type: 'success',
  });
  fromObj.name='';
  fromObj.unit='';
  centerDialogVisible.value = false
})
}
  }
};
//修改
const handleEdit = (index, row) => {
  id.value = row.id;
  editing.value =true;
  centerDialogVisible.value = true;
  fromObj.name = row.name;
  fromObj.unit = row.unit;
  //这里把index传到新增弹窗
  fromObj.index = index
}
//删除
const handleDelete = (index, row) => {
  ElMessageBox.confirm(
    '确定删除?',
    '删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
  .then(() => {
    let data={
      id:row.id
    }
      api.$measureDel(data).then((res)=>{
        tableData.value.splice(index,1)
        ElMessage({
        type: 'success',
        message: '删除成功',
      })
      }) 
    })
  console.log(index, row)
}
</script>